<template>
	<view class="bindPhysicalCard_warp">
		<Header leftPathType="switchTab" leftPath="/pages/mine/mine" :title="$t('card.bind.card.title')"/>
		<view class="_content_warp">
			<view class="_content_title_warp">{{$t('card.bind.card.msg')}}</view>
			<view class="_content_common">
				<view class="_content_title_common">{{$t("card.bind.card")}}</view>
				<up-input
					:placeholder="$t('card.bind.card.placeholder')"
					border="surround"
					v-model="form.cardNo"
					:customStyle="inputCss"
				  ></up-input>
			</view>
			<view class="_content_common">
				<view class="_content_title_common">{{$t("recharge.cardholder")}}</view>
				<view class="_content_title_select" @click="checkOwnersShow(true)">
					<view>{{ownersSelectShow && Object.keys(ownersSelectShow).length !==0 ? ownersSelectShow.ownerFirstName+' '+ownersSelectShow.ownerLastName : $t("common.select")}}</view>
					<up-image src="/static/comm/right_h.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
				</view>
			</view>
			<view class="but_comm_warp" @click="jumpPay">
				{{$t('card.bind.card.ok')}}
			</view>
		</view>
		<!-- 选择持卡人 -->
		<up-popup
			:show="ownersShow" 
			:round="10" 
			mode="bottom" 
			@close="checkOwnersShow(false)" 
			@open="checkOwnersShow(true)"
			:customStyle="{
				'height':'900rpx',
				'padding':'30rpx 30rpx 60rpx',
			}"
		>
			<view class="select_address_warp">
				<view class="select_address_title">
					{{$t('card.bind.card.transfer.address')}}
				</view>
				<view class="select_address_content"> 
					<view class="address_templ">
						<view v-for="item in ownersOption" :key="item.id" :class="ownersSelect.id ===item.id ? 'address_templ_item address_templ_item_sel':'address_templ_item'">
							<view>{{item.ownerFirstName}} {{item.ownerLastName}}</view>
							<up-checkbox
								name="isCheck"
								usedAlone
								v-model:checked="item.isSelect"
								shape="circle"
								activeColor="#265FFF"
								size="16"
								iconSize="16"
								@change="(event)=>ownersChange(event,item)"
							></up-checkbox>
						</view>
					</view>
					<view class="but_comm_warp" @click="ownersOk">{{$t('common.confirm')}}</view>
				</view>
			</view>
		</up-popup>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import { getCardOwners,bandingCard } from '@/api/card.js';
	
	export default {
		components:{Header},
		data() {
			return {
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
				form:{
					cardNo:null,
					ownerId:null,
				},
				ownersShow:false,
				ownersOption:[],// 持卡人
				ownersSelect:{},// 选择的持卡人
				ownersSelectShow:{},// 选择的持卡人
			};
		},
		methods: {
			/**
			 * 查询持卡人
			 */
			async getCardOwnersFun(){
				const resp = await getCardOwners();
				if(resp && resp.bizcode === 100){
					const optionData = [];
					const data = resp.data;
					if(data && data.length !==0){
						data.map((item,index)=>{
							optionData.push({
								...item,
								isSelect:false,
							})
						})
					}
					this.ownersOption = optionData;
				}
			},
			// 切换持卡人的弹框
			checkOwnersShow(status){
				if(status){
					this.getCardOwnersFun();
				}else{
					this.ownersOption = [];// 持卡人
					this.ownersSelect = {};// 选择的持卡人
				}
				this.ownersShow = status;
			},
			/**
			 * 选中支付地址
			 * @param {Object} event
			 * @param {Object} item
			 */
			ownersChange(event,item){
				const ownersOption = this.ownersOption;
				let ownersSelect = {};
				ownersOption.map(e=>{
					if(e.id === item.id && event){
						e.isSelect = true;
						ownersSelect = e;
						
					}else{
						e.isSelect = false;
					}
				})
				this.ownersSelect = ownersSelect;
				this.ownersOption = ownersOption;
			},
			/**
			 * 确认绑定实体卡
			 */
			async jumpPay(){
				const form = this.form;
				if(!form.cardNo){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('card.bind.card.placeholder'),
					});
					return;
				}
				if(!form.ownerId){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('card.add.cardholder.placeholder'),
					});
					return;
				}
				const resp = await bandingCard(form);
				if(resp && resp.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: this.$t('card.bind.card.success'),
					});
					setTimeout(()=>{
						// TODO 需要确认返回值
						const data = resp.data;
						uni.navigateTo({
							url:"/pages/activate_card/activate_card?id="+data.id,
						})
					},1000)
				}
			},
			/**
			 * 确定选中持卡人
			 */
			ownersOk(){
				this.ownersSelectShow = this.ownersSelect;
				this.form.ownerId = this.ownersSelect.id;
				this.checkOwnersShow(false);
			}
		}
	}
</script>

<style lang="scss">
.bindPhysicalCard_warp{
	height: calc(100vh - 0rpx);
	overflow: hidden;
	font-family: PingFang SC;
	._content_warp{
		height: calc(100vh - 200rpx);
		overflow: auto;
		padding: 30rpx;
		._content_title_warp{
			font-size: 26rpx;
			color: #333333;
			margin-bottom: 40rpx;
		}
		._content_common{
			margin-bottom: 30rpx;
		}
		._content_title_common{
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}
		._content_title_select{
			display: flex;
			justify-content: space-between;
			background: #F3F3F3;
			border-radius: 20rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #999999;
			padding: 34rpx 30rpx;
		}
	}
	.but_comm_warp{
		margin-top: 100rpx;
	}
}
</style>
